<template>
  <div class="dashboard-container">
    <div v-for="(item, index) in dashboardData" :key="index" class="dashboard-item">
      <!-- <div class="item-content">
        <i :class="item.icon"></i>
        <span class="number">{{ item.value }}</span>
      </div> -->
      <img :src="item.icon" class="img" alt="" />
      <!-- <img src="../../assets/ncImg/1.png" alt="" /> -->
      <div class="item-label">
        <h2>{{ item.value }}</h2>
        <p class="txt">{{ item.label }}</p>
      </div>
      <img src="@/assets/ncImg/右上箭头.png" class="img_icon" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dashboardData = ref([
  {
    icon: '/src/assets/ncImg/1.png', // iView图标类名，可按需更换
    value: 500,
    label: '今日预约人数',
  },
  {
    icon: '/src/assets/ncImg/2.png',
    value: 400,
    label: '今日挂号人数',
  },
  {
    icon: '/src/assets/ncImg/3.png',
    value: 50000,
    label: '今日门诊充值总额',
  },
  {
    icon: '/src/assets/ncImg/4.png',
    value: 40000,
    label: '今日门诊消费总额',
  },
  {
    icon: '/src/assets/ncImg/5.png',
    value: 678,
    label: '今日刷卡人数',
  },
])
</script>

<style scoped >
.dashboard-container {
  display: flex;
  justify-content: space-around;
}
.dashboard-item {
  background-color: #ffff;
  padding: 10px;
  border-radius: 5px;
  width: 18%;
  display: flex;
}
.img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.img_icon {
  width: 15px;
  height: 15px;
}
.txt {
  font-size: 12px;
  margin-top: 5px;
  height: 15px;
  overflow: hidden;
}
.item-content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}
.item-content i {
  font-size: 24px;
  margin-right: 10px;
}
.number {
  font-size: 24px;
  font-weight: bold;
}
.item-label {
  width: 70%;
  font-size: 14px;
  color: #666;
}
</style>
